<template>
  <div class="box_wrapper">
    <div class="tips_box">
      <p class="tips">签到配置</p>
    </div>
    <div class="sign_box">
      <el-form
        ref="ruleFormRef"
        :model="formData"
        :rules="rules"
        label-position="right"
        label-width="100px"
        class="form_box"
        size="large"
      >
        <el-row>
          <el-col :span="16">
            <el-form-item label="周 期：" prop="cycle">
              <el-input-number
                v-model="formData.cycle"
                disabled
                :min="1"
                :max="10"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="奖励配置：" prop="reward">
            <el-col
              :span="24"
              v-for="(item, index) in formData.reward"
              :key="index"
              class="reward_box"
            >
              {{ `第${index + 1}阶梯` }}
              <el-input-number
                :model-value="item"
                :min="1"
                :max="1000"
                @change="handleChange(index)"
                @blur="handleBlur"
              />
              {{ `币` }}
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="">
              <el-button size="large" type="primary" @click="save">
                保存配置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { getCheckin, updateCheckin } from "@/api/operateCenter/global/index";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";

const ruleFormRef = ref<FormInstance>();
const form = {
  cycle: 7,
  reward: <any>[],
};
const formData = ref(Object.assign({}, form));
const index = ref(); // 修改的下标

const rules = reactive({
  cycle: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  reward: [{ required: true, message: "请输入昵称", trigger: "blur" }],
});

// 下标
const handleChange = (i: number) => {
  index.value = i;
};
const handleBlur = (e: any) => {
  formData.value.reward[index.value] = +e.target.value;
};

// 获取配置
const getCheckinList = () => {
  getCheckin().then((res: any) => {
    formData.value = res;
    formData.value.reward = res.reward?.map((item: Record<string, any>) => {
      return +item.slice(2);
    });
  });
};

// 保存
const save = async () => {
  let temD = cloneDeep(formData.value?.reward)?.map((item: number) => {
    return "1=" + item;
  });
  let params = {
    cycle: formData.value?.cycle,
    reward: temD,
  };
  updateCheckin(params).then(() => {
    ElMessage.success("保存成功");
  });
};

onMounted(() => {
  getCheckinList();
});
</script>
<style scoped lang="scss">
.box_wrapper {
  min-height: calc(100vh - 70px);
  padding: 20px;
  background-color: #fff;

  .tips_box {
    padding-bottom: 20px;
    padding-left: 20px;
    margin: unset;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;

    p {
      font-size: 14px;
    }

    .tips {
      margin-bottom: 4px;
      font-size: 20px;
      color: #363636;
    }
  }

  .reward_box {
    margin-bottom: 15px;
    color: #666;
  }
}
</style>
